<template>
  <smart-page >
    <template #search>
      <smart-search :query-array="MAIN_SEARCH" @on-handler="onSearch"/>
    </template>
    <a-table v-model:selectedKeys="selectedKeys"
             :table-layout-fixed="theme.layoutFixed"
             :row-selection="rowSelection"
             :columns="TASK_MAIN_COLUMNS"
             :row-key="rowKey"
             :column-resizable="theme.resizable"
             :bordered="theme.bordered"
             :stripe="theme.stripe"
             :sticky-header="theme.sticky"
             :hoverable="theme.hoverAble"
             :pagination="pagination"
             :loading="theme.loading"
             :data="dataSource"
             @page-change="onPageChange"
             @page-size-change="onPageSizeChange">
      <template #action="{ record }">
        <a-space>
          <a-link v-auth="Acl.WORK_CUSTOMER_MAIN_ADD_MODIFICATION" v-if="EmptyUtil.isEmptyObject(record.account)"  @click="readCtr.open(record)"> 分配客服</a-link>
          <a-link v-auth="Acl.WORK_CUSTOMER_MAIN_ADD_MODIFICATION" v-if="EmptyUtil.isEmptyObject(record.staff)&&EmptyUtil.isNotEmptyObject(record.account)"  @click="readCtr.open(record)"> 工单下发</a-link>
          <a-link v-auth="Acl.WORK_CUSTOMER_MAIN_UPDATE" @click="editCtr.open(record)"> 去完成</a-link>
        </a-space>
      </template>
      <template #contents="{record}" >

        未完成:{{record.content.filter(x=>x.isComplete == false).length}}个 , 已完成:{{record.content.filter(x=>x.isComplete == true).length}}

      </template>

      <template #pigStatus="{record}" >
        <a-tag :color="record.orders.pig.status?.theme"> {{record.orders?.pig?.status?.label}}</a-tag>
      </template>

      <template #nickName="{record}" >
        {{record.orders.pig.member.nickName}}
      </template>

      <template #phoneNumber="{record}" >
        {{record.orders.pig.member.phoneNumber}}
      </template>

      <template #staffs="{record}" >
        <span v-if="EmptyUtil.isNotEmptyObject(record.staff)"> {{record.staff?.name}} </span>
        <span v-else> 暂未分配</span>
      </template>
      <template #accounts="{record}" >
        <span v-if="EmptyUtil.isNotEmptyObject(record.account)"> {{record.account?.name}} </span>
        <span v-else> 暂未分配</span>
      </template>

      <template #enter="{record}" >
        <a-tag :color="record.orders?.status?.theme"> {{record.orders?.status?.label}}</a-tag>
      </template>
    </a-table>
    <edit-modal v-if="editCtr.show" :record="editCtr.record" @cancel="editCtr.close"/>
    <generated-modal v-if="readCtr.show" :record="readCtr.record" @cancel="readCtr.close"/>
  </smart-page>
</template>
<script lang="ts" setup name="system-organ-position">
import {onMounted} from 'vue';

import {MAIN_SEARCH} from '../resource/search'
import {TASK_MAIN_COLUMNS} from "../resource/colums";
import {TablePage} from "@/libs/core";
import {CustomerHttp} from "../resource/http";
import EditModal from './edit.vue'
import {Acl} from "@/libs/acl";
import {EmptyUtil} from "@/utils";
import GeneratedModal from "./generated.vue";

const pageConfig = {title: '职务', rowKey: 'id', nameKey: 'name'}
const {getMainPage, delMain} = CustomerHttp
const tablePage = new TablePage(pageConfig).setFetchXhr(getMainPage)
    .setDeleteXhr(delMain).setPermission(Acl.WORK_CUSTOMER_MAIN_PAGE_LIST);

const {theme, pagination, rowKey, dataSource, rowSelection, selectedKeys, editCtr,readCtr} = tablePage
const {onFetch, onPageChange, onPageSizeChange, onSearch} = tablePage
onMounted(() => onFetch())
</script>

